<template>
  <div id="map" :style="`height:${height};width=${width}`"></div>
</template>

<script>
export default {
  name: 'LKmap',
  props: {
    lnglats: {
      type: Array,
      required: true
    },
    height: {
      type: String,
      default: '400px'
    },
    width: {
      type: String,
      default: '100%'
    },
  },
  data() {
    return {
      map: null,
      icon: null,
      markers: [],
      TextSearchService: null, // 关键字搜索
      searchDataList: [], //输入提示信息
      timer: null, // 点标记弹跳定时器
    }
  },
  methods: {
    // 初始化地图
    initMap() {
      // eslint-disable-next-line no-undef
      const position = new LKMap.LngLat(this.lnglats[0].position[0], this.lnglats[0].position[1])
      // eslint-disable-next-line no-undef
      const map = new LKMap.Map('map', {
        center: position,
        zoom: 14
      })

      // 自定义点标记（图片）
      // eslint-disable-next-line no-undef
      this.icon = new LKMap.Icon({
        // eslint-disable-next-line no-undef
        size: new LKMap.Size(32, 32),
        image: require('@/assets/marker.png'),
        // eslint-disable-next-line no-undef
        imageSize: new LKMap.Size(32, 32),
        // eslint-disable-next-line no-undef
        imageOffset: new LKMap.Pixel(0, 0)
      })

      map.on('load', () => {
        // 添加标点
        this.addMarker(this.lnglats, map)
        // 创建关键字搜索对象
        this.createObject()
      })
      this.map = map
    },

    // 是否有目标标记
    haveMarker(id) {
      return this.markers.find(item => item.extData.identificationId == id)
    },

    // 目标标记index
    haveMarkerIndex(id) {
      return this.markers.findIndex(item => item.extData.identificationId == id)
    },

    // 添加标记
    addMarker(lnglats, map) {
      let targetMarker = this.haveMarker(lnglats.id)
      if (targetMarker) return this.$Message.warning('该标记已存在')
      lnglats.map(item => {
        let markers = null
        // eslint-disable-next-line no-undef
        markers = new LKMap.Marker({
          map: map ? map : this.map,
          // eslint-disable-next-line no-undef
          position: new LKMap.LngLat(item.position[0], item.position[1]),
          anchor: 'bottom',
          // 若传入属性有 customIcon 则使用自定义图标 
          icon: item.customIcon ? this.icon : undefined,
          draggable: false, // 默认不允许拖拽
          extData: {
            name: item.name,
            identificationId: item.id
          }
        })
        markers.on('click', (e) => {
          this.$emit('showDetail', e)
        })
        markers.on('mouseover', () => {
          // 在 maker上绑定文本标记
          markers.setLabel({
            // eslint-disable-next-line no-undef
            offset: new LKMap.Pixel(0, -6), // 设置文本标注偏移量
            content: `<div>${item.name}</div>`, // 设置文本标注内容
            direction: 'top' // 设置文本标注位置（参照物是marker点图标）
          })
        })
        markers.on('mouseout', () => {
          // 移除 maker文本标记
          markers.removeLabel()
        })

        this.markers.push(markers)
      })
    },

    // 删除 目标id标记
    removeMarker(id, isShow = true) {
      let targetMarker = this.haveMarker(id)
      if (!targetMarker) {
        return isShow ? this.$Message.warning('该标记不存在') : false
      }
      targetMarker.remove()
      this.markers.splice(this.haveMarkerIndex(id), 1)
    },

    // 开启拖拽 目标id标记
    draggable(id) {
      let targetMarker = this.haveMarker(id)
      if (!targetMarker) return this.$Message.warning('该标记不存在')
      targetMarker.setDraggable(true)
    },
    // 关闭拖拽 目标id标记
    unDraggable(id) {
      let targetMarker = this.haveMarker(id)
      if (!targetMarker) return this.$Message.warning('该标记不存在')
      targetMarker.setDraggable(false)
    },

    // 调整地图视野，包含所有覆盖物
    setFitView() {
      this.map.setFitView(null, {
        // 以给定边界添加的以像素为单位的填充量。
        padding: { top: 80, bottom: 20, left: 60, right: 60 },
        // 地图视图转换到指定边界时允许的最大缩放级别。
        // maxZoom: 16,
      })
    },

    // 改变地图中心点
    setCenter(point, type) {
      // eslint-disable-next-line no-undef
      const position = new LKMap.LngLat(point[0], point[1])
      // 直接变化
      if (type === 'flash') {
        this.map.setCenter(position)
      } else {
        // 地图平滑移动到中心点
        this.map.panTo(position)
      }
    },

    // 关键字搜索
    // 创建示例化对象
    createObject() {
      // eslint-disable-next-line no-undef
      this.TextSearchService = new LKMap.Autocomplete({
        size: 10,
        // adcode: 500000	// 城市代码-重庆市
      })
    },
    // 搜索
    searchAddress(addressName) {
      if (addressName === '') this.searchDataList = []
      this.TextSearchService.search(addressName, (status, result) => {
        this.$emit('addSearchAddressList', result)
      })
    },
    // 标记弹跳效果
    markerBounce(id) {
      let targetMarker = this.haveMarker(id)
      targetMarker.setAnimation('LKMAP_ANIMATION_BOUNCE')
      clearTimeout(this.timer)
      this.timer = setTimeout(() => {
        targetMarker.setAnimation("LKMAP_ANIMATION_NONE")
      }, 3000)
    }
  },
  mounted() {
    this.initMap()
  }
}
</script>

<style scoped lang="scss">
::v-deep .lkmap-marker .LKmap-label-content .label-content-container {
  padding: 6px 10px;
  font-size: 14px;
  color: #fff;
  background-color: #306466;
}
</style>
